<template>
  <el-dialog :visible.sync="visible" center width="1200px">
    <egrid
      v-loading="loading"
      max-height="500"
      class="egrid"
      stripe
      fit
      border
      highlight-current-row
      element-loading-text="正在努力加载中..."
      :data="tableData"
      :columns="columns"
      :columns-schema="columnsSchema"
    />
    <el-pagination v-if="paginate.total > 0" class="pagination_box" background :current-page="paginate.current" :page-sizes="[10, 20, 30, 40]" layout="total, sizes, prev, pager, next, jumper" :total="paginate.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    <span slot="footer">
      <el-button @click="cancel">返回</el-button>
    </span>
  </el-dialog>
</template>

<script>
import dicValues from '@/components/dicTransform/index'
export default {
  name: 'ContractWayBillList',
  data() {
    const DICTIONARIES = {
      auditStatus: [
        // 审核状态 0 待审核 1-审核通过 -1 审核拒绝
        {
          code: 0,
          name: '待审核'
        },
        {
          code: 1,
          name: '审核通过'
        },
        {
          code: -1,
          name: '审核拒绝'
        }
      ]
    }
    return {
      visible: false,
      paginate: {
        sizes: [10, 15, 20, 30, 50],
        limit: 10,
        layout: 'prev, pager, next, sizes',
        current: 0,
        total: 0
      },
      searchParams: {
        page: 1,
        limit: 10
      },
      /** *
       * 定义显示的表格
       */
      columns: [
        {
          label: '出运单编码',
          prop: 'code',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '柜号',
          prop: 'cabinet_no',
          width: '150',
          align: 'center',
          tooltip: false
        },
        {
          label: '提单号',
          prop: 'bl_no',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '审核状态',
          prop: 'audit_status',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '运输方式',
          prop: 'shipment',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '起运港',
          prop: 'shipment_port',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '目的港',
          prop: 'destination_port',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建人',
          prop: 'created_by_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '创建时间',
          prop: 'created_at',
          width: '200',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改人',
          prop: 'updated_by_name',
          width: '100',
          align: 'center',
          tooltip: false
        },
        {
          label: '修改时间',
          prop: 'updated_at',
          width: '200',
          align: 'center',
          tooltip: false
        }
      ],
      /** *
       * 字典表组件
       */
      columnsSchema: {
        审核状态: {
          propsHandler({ col, row }) {
            return {
              dictionaries: DICTIONARIES['auditStatus'],
              code: row[col.prop]
            }
          },
          component: dicValues
        }
      },
      tableData: [],
      loading: false,
      issignContract: [], // 运输方式
      departureData: [], // 启运港
      destineData: [] // 目的港
    }
  },
  created() {
    const vm = this
    vm.getDic()
  },
  methods: {
    // 获取 字典
    getDic() {
      const vm = this
      const dicParams = [{
        type: 'transport',
        key: 'issignContract',
        name: '运输方式'
      },
      {
        type: 'port',
        key: 'departureData',
        name: '起运港'
      },
      {
        type: 'destination',
        key: 'destineData',
        name: '目的港'
      }]
      const promiseArr = dicParams.map((e) => {
        return new Promise((resolve, reject) => {
          vm.$cache.getDic(e.type)
            .then((res) => {
              resolve({
                data: res,
                key: e.key
              })
            })
            .catch((err) => {
              reject(err)
            })
        })
      })
      Promise.all(promiseArr).then((res) => {
        res.forEach((e) => {
          vm[e.key] = e.data
        })
      })
    },
    // 显示
    show(id) {
      const vm = this
      vm.getList(id)
      vm.visible = true
    },
    // 关闭
    cancel() {
      const vm = this
      vm.visible = false
    },
    // 获取列表
    getList(id) {
      const vm = this
      const params = {
        page: vm.searchParams.page,
        limit: vm.searchParams.limit,
        contract_id: id
      }
      vm.loading = true
      const keyArr = [
        { currentKey: 'shipment', key: 'issignContract' },
        { currentKey: 'shipment_port', key: 'departureData' },
        { currentKey: 'destination_port', key: 'destineData' }
      ]
      vm.$http.get('/transhipment-order', { params }).then(res => {
        vm.tableData = res.data.map(e => {
          vm.setParam(e, keyArr)
          return e
        })
        vm.loading = false
        vm.paginate.total = res.count
      }).catch(() => {
        vm.loading = false
      })
    },
    // 设置 字段
    setParam(current, keyArr) {
      const vm = this
      keyArr.forEach(e => {
        const { currentKey, key } = e
        const dics = vm[key]
        const item = dics.find(e => current[currentKey] === e.id.toString())
        if (item) {
          current[currentKey] = item.dict_data_name
        }
      })
    },
    //
    handleSizeChange(val) {
      const vm = this
      vm.searchParams.limit = val
      vm.searchParams.page = 1
      vm.getList()
    },
    // page 改变 handler
    handleCurrentChange(val) {
      const vm = this
      vm.searchParams.page = val
      vm.getList()
    }
  }
}
</script>

<style lang="less" scoped></style>
